<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <!-- <div class="site-content">
        <div class="brand-info">
          <h2 class="brand-info__text" style="    text-align: right;
    font-size: 60px;">消防远程监控监测云平台</h2>
        </div>
        <div class="login-main">
          <h3 class="login-title">登录</h3>
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            status-icon>
            <el-form-item prop="userName">
              <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="验证码">
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()" alt="">
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div> -->
      <div id="imgBox">
        <img src="../../assets/img/xf.jpg" class="xfbg" id="BgImg">
      </div>
      <div id="siteBox" class="space_between">
        <div class="siteBox_left res">
          <div id='main'>
          </div>
          <canvas id='canvas'></canvas>
          <div class="siteBox_left_con abs">
            <div class="login_logo">
              <img src="../../../static/img/logo.svg">
            </div>
            <div class="zhxf_tit">
              <img src="../../../static/img/zhxf_tit.png">
            </div>
            <div class="zhxf_js">
              中药材交易管理平台
            </div>
            <div class="copyRight">
              CopyRight © 2006-2022 唐山市达意科技股份有限公司版权所有 备案号 冀ICP备11013426号-1
            </div>
          </div>
        </div>
        <div class="siteBox_right">
          <div class="login_input_box">
            <div class="login_input_tit">欢迎使用</div>
            <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
                     status-icon>
              <el-form-item prop="userName">
                <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
              </el-form-item>
              <el-form-item prop="captcha">
                <el-row :gutter="20">
                  <el-col :span="14">
                    <el-input v-model="dataForm.captcha" placeholder="验证码">
                    </el-input>
                  </el-col>
                  <el-col :span="10" class="login-captcha">
                    <img :src="captchaPath" @click="getCaptcha()" alt="">
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>


    </div>
    <!-- <div style="position: fixed;bottom: 0;text-align: center;font-size: 14px;width: 100%;color: #fff">
      CopyRight © 2006-2021 唐山市达意科技股份有限公司版权所有 备案号 冀ICP备11013426号-1
    </div> -->
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  data() {
    return {
      mul_table: [
        512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512,
        454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512,
        482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456,
        437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512,
        497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328,
        320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456,
        446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335,
        329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512,
        505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405,
        399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328,
        324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271,
        268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456,
        451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388,
        385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335,
        332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292,
        289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259
      ],
      shg_table: [
        9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17,
        17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
        19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20,
        20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21,
        21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
        21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22,
        22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
        22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23,
        23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
        23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
        23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
        23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
        24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
        24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
        24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
        24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24
      ],
      dataForm: {
        userName: '',
        password: '',
        checkKey: '',
        captcha: '',
        uuid: ''
      },
      captchaPath: '',
      dataRule: {
        userName: [{
          required: true,
          message: '帐号不能为空',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '密码不能为空',
          trigger: 'blur'
        }],
        captcha: [{
          required: true,
          message: '验证码不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.getCaptcha();
  },
  updated() {
    $(".xfbg").css({
      width: $(window).width() * 1.1,
      height: "auto"
    });
    let _that = this;
    _that.stackBlurImage('BgImg', 'canvas', 32, 'main');
  },
  mounted() {
    $(".xfbg").css({
      width: $(window).width() * 1.1,
      height: "auto"
    });
    let _that = this;
    window.onload = function () {
      _that.stackBlurImage('BgImg', 'canvas', 32, 'main');
    }
  },
  methods: {
    stackBlurImage(imageID, canvasID, radius, maindiv) {

      var img = document.getElementById(imageID);
      var canvas = document.getElementById(canvasID);
      var mainDiv = document.getElementById(maindiv);

      var oMainH = $(mainDiv).height();
      var oMainW = $(mainDiv).width();
      var oMainL = $(mainDiv).offset().left;
      var oMainT = $(mainDiv).offset().top;
      // var oMainL = "0px";
      // var oMainT = "0px";

      canvas.style.width = oMainW + "px";
      canvas.style.height = oMainH + "px";
      canvas.width = oMainW;
      canvas.height = oMainH;
      canvas.style.left = oMainL + "px";
      canvas.style.top = oMainT + "px";

      var context = canvas.getContext("2d");
      context.clearRect(0, 0, oMainW, oMainH);
      context.drawImage(img, oMainL, oMainT, oMainW, oMainH, 0, 0, oMainW, oMainH);


      if (isNaN(radius) || radius < 1) return;

      this.stackBlurCanvasRGBA(canvasID, 0, 0, oMainW, oMainH, radius);

    },
    stackBlurCanvasRGBA(id, top_x, top_y, width, height, radius) {
      if (isNaN(radius) || radius < 1) return;
      radius |= 0;

      var canvas = document.getElementById(id);
      var context = canvas.getContext("2d");
      var imageData;

      try {
        try {
          imageData = context.getImageData(top_x, top_y, width, height);
        } catch (e) {

          // NOTE: this part is supposedly only needed if you want to work with local files
          // so it might be okay to remove the whole try/catch block and just use
          // imageData = context.getImageData( top_x, top_y, width, height );
          try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
            imageData = context.getImageData(top_x, top_y, width, height);
          } catch (e) {
            alert("Cannot access local image");
            throw new Error("unable to access local image data: " + e);
            return;
          }
        }
      } catch (e) {
        alert("Cannot access image");
        throw new Error("unable to access image data: " + e);
      }

      var pixels = imageData.data;

      var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum,
        r_out_sum, g_out_sum, b_out_sum, a_out_sum,
        r_in_sum, g_in_sum, b_in_sum, a_in_sum,
        pr, pg, pb, pa, rbs;

      var div = radius + radius + 1;
      var w4 = width << 2;
      var widthMinus1 = width - 1;
      var heightMinus1 = height - 1;
      var radiusPlus1 = radius + 1;
      var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;

      var stackStart = new this.BlurStack();
      var stack = stackStart;
      for (i = 1; i < div; i++) {
        stack = stack.next = new this.BlurStack();
        if (i == radiusPlus1) var stackEnd = stack;
      }
      stack.next = stackStart;
      var stackIn = null;
      var stackOut = null;

      yw = yi = 0;

      var mul_sum = this.mul_table[radius];
      var shg_sum = this.shg_table[radius];

      for (y = 0; y < height; y++) {
        r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;

        r_out_sum = radiusPlus1 * (pr = pixels[yi]);
        g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
        b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);
        a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);

        r_sum += sumFactor * pr;
        g_sum += sumFactor * pg;
        b_sum += sumFactor * pb;
        a_sum += sumFactor * pa;

        stack = stackStart;

        for (i = 0; i < radiusPlus1; i++) {
          stack.r = pr;
          stack.g = pg;
          stack.b = pb;
          stack.a = pa;
          stack = stack.next;
        }

        for (i = 1; i < radiusPlus1; i++) {
          p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
          r_sum += (stack.r = (pr = pixels[p])) * (rbs = radiusPlus1 - i);
          g_sum += (stack.g = (pg = pixels[p + 1])) * rbs;
          b_sum += (stack.b = (pb = pixels[p + 2])) * rbs;
          a_sum += (stack.a = (pa = pixels[p + 3])) * rbs;

          r_in_sum += pr;
          g_in_sum += pg;
          b_in_sum += pb;
          a_in_sum += pa;

          stack = stack.next;
        }


        stackIn = stackStart;
        stackOut = stackEnd;
        for (x = 0; x < width; x++) {
          pixels[yi + 3] = pa = (a_sum * mul_sum) >> shg_sum;
          if (pa != 0) {
            pa = 255 / pa;
            pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa;
            pixels[yi + 1] = ((g_sum * mul_sum) >> shg_sum) * pa;
            pixels[yi + 2] = ((b_sum * mul_sum) >> shg_sum) * pa;
          } else {
            pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0;
          }

          r_sum -= r_out_sum;
          g_sum -= g_out_sum;
          b_sum -= b_out_sum;
          a_sum -= a_out_sum;

          r_out_sum -= stackIn.r;
          g_out_sum -= stackIn.g;
          b_out_sum -= stackIn.b;
          a_out_sum -= stackIn.a;

          p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2;

          r_in_sum += (stackIn.r = pixels[p]);
          g_in_sum += (stackIn.g = pixels[p + 1]);
          b_in_sum += (stackIn.b = pixels[p + 2]);
          a_in_sum += (stackIn.a = pixels[p + 3]);

          r_sum += r_in_sum;
          g_sum += g_in_sum;
          b_sum += b_in_sum;
          a_sum += a_in_sum;

          stackIn = stackIn.next;

          r_out_sum += (pr = stackOut.r);
          g_out_sum += (pg = stackOut.g);
          b_out_sum += (pb = stackOut.b);
          a_out_sum += (pa = stackOut.a);

          r_in_sum -= pr;
          g_in_sum -= pg;
          b_in_sum -= pb;
          a_in_sum -= pa;

          stackOut = stackOut.next;

          yi += 4;
        }
        yw += width;
      }


      for (x = 0; x < width; x++) {
        g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;

        yi = x << 2;
        r_out_sum = radiusPlus1 * (pr = pixels[yi]);
        g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
        b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);
        a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);

        r_sum += sumFactor * pr;
        g_sum += sumFactor * pg;
        b_sum += sumFactor * pb;
        a_sum += sumFactor * pa;

        stack = stackStart;

        for (i = 0; i < radiusPlus1; i++) {
          stack.r = pr;
          stack.g = pg;
          stack.b = pb;
          stack.a = pa;
          stack = stack.next;
        }

        yp = width;

        for (i = 1; i <= radius; i++) {
          yi = (yp + x) << 2;

          r_sum += (stack.r = (pr = pixels[yi])) * (rbs = radiusPlus1 - i);
          g_sum += (stack.g = (pg = pixels[yi + 1])) * rbs;
          b_sum += (stack.b = (pb = pixels[yi + 2])) * rbs;
          a_sum += (stack.a = (pa = pixels[yi + 3])) * rbs;

          r_in_sum += pr;
          g_in_sum += pg;
          b_in_sum += pb;
          a_in_sum += pa;

          stack = stack.next;

          if (i < heightMinus1) {
            yp += width;
          }
        }

        yi = x;
        stackIn = stackStart;
        stackOut = stackEnd;
        for (y = 0; y < height; y++) {
          p = yi << 2;
          pixels[p + 3] = pa = (a_sum * mul_sum) >> shg_sum;
          if (pa > 0) {
            pa = 255 / pa;
            pixels[p] = ((r_sum * mul_sum) >> shg_sum) * pa;
            pixels[p + 1] = ((g_sum * mul_sum) >> shg_sum) * pa;
            pixels[p + 2] = ((b_sum * mul_sum) >> shg_sum) * pa;
          } else {
            pixels[p] = pixels[p + 1] = pixels[p + 2] = 0;
          }

          r_sum -= r_out_sum;
          g_sum -= g_out_sum;
          b_sum -= b_out_sum;
          a_sum -= a_out_sum;

          r_out_sum -= stackIn.r;
          g_out_sum -= stackIn.g;
          b_out_sum -= stackIn.b;
          a_out_sum -= stackIn.a;

          p = (x + (((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width)) << 2;

          r_sum += (r_in_sum += (stackIn.r = pixels[p]));
          g_sum += (g_in_sum += (stackIn.g = pixels[p + 1]));
          b_sum += (b_in_sum += (stackIn.b = pixels[p + 2]));
          a_sum += (a_in_sum += (stackIn.a = pixels[p + 3]));

          stackIn = stackIn.next;

          r_out_sum += (pr = stackOut.r);
          g_out_sum += (pg = stackOut.g);
          b_out_sum += (pb = stackOut.b);
          a_out_sum += (pa = stackOut.a);

          r_in_sum -= pr;
          g_in_sum -= pg;
          b_in_sum -= pb;
          a_in_sum -= pa;

          stackOut = stackOut.next;

          yi += width;
        }
      }

      context.putImageData(imageData, top_x, top_y);

    },
    BlurStack() {
      this.r = 0;
      this.g = 0;
      this.b = 0;
      this.a = 0;
      this.next = null;
    },
    // 提交表单
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const params = new URLSearchParams();
          params.append('grant_type', 'password_code');
          params.append('username', btoa(this.dataForm.userName));
          params.append('password', btoa(this.dataForm.password));
          params.append('deviceId', this.dataForm.uuid);
          params.append('validCode', this.dataForm.captcha);
          this.$http({
            url: this.$http.adornUrl('/api-auth/oauth/token'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'Authorization': 'Basic VHJhZGluZzp0cmFkaW5n'
            },
            data: params
            /*data: this.$http.adornData(qs.stringify({
              'grant_type':'password_code',
              /!*'username': aes.en(JSON.stringify(this.dataForm.userName)),
              'password': aes.en(JSON.stringify(this.dataForm.password)),*!/
              'username': aes.en(JSON.stringify(this.dataForm.userName)),
              'password': aes.en(JSON.stringify(this.dataForm.password)),
              'deviceId':this.dataForm.uuid,
              'validCode': this.dataForm.captcha
            }))*/
          }).then(({
                     data
                   }) => {
            if (data && data.code === 0) {
              this.$cookie.set('token', "Bearer " + data.data.access_token);
              this.$router.replace({name: 'home'});
            } else {
              this.getCaptcha();
              this.$message.error(data.msg)
            }
          }).catch((error) => {
            //发生错误时抛出的异常  所以上边的else根本不到那里
            this.getCaptcha();
            console.log(error.response.data)
            if (error.response.data.msg) {
              this.$message.error(error.response.data.msg)
            } else {
              this.$message.error("用户名或密码错误")
            }
            //alert(XMLHttpResponse)
            /*   console.log("catch: ",error.response);*/
          })
        }
      })
    },
    // 获取验证码
    getCaptcha() {
      var uuid = this.uuid();
      this.dataForm.uuid = uuid;
      this.$http({
        url: this.$http.adornUrl('/api-auth/validata/code/' + uuid),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({
                 data
               }) => {
        if (data && data.code === 0) {
          this.captchaPath = data.data.image
        }
      })
    },
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";   // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);   // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return uuid;
    }
  }
}
</script>

<style lang="scss">
@import url("../../assets/bigdataStyle1/css/animate.css");
@import url("../../assets/bigdataStyle4/css/common.css");

#imgBox {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.site-content__wrapper .xfbg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

#main {
  width: 566px;
  height: 806px;
  color: #ffffff;
  position: absolute;
  z-index: 12;
  left: 0;
  top: 0;
  opacity: 0.25;
  background: #fff;
  border-radius: 1px;
  // box-shadow:-1px -1px 4px rgba(115,115,115,0.6) inset,
  //       1px 1px 4px rgba(115,115,115,0.6) inset;
}

#canvas {
  z-index: 1;
  position: absolute;
  left: 0 !important;
  top: 0 !important;
  width: 566px !important;
  height: 806px !important;
}

#siteBox {
  width: 1130px;
  height: 806px;
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 20px;
  overflow: hidden;

  .siteBox_left {
    width: 566px;
    height: 806px;
    // filter: blur(12px);
    // opacity: 0.8;
    overflow: hidden;

    .siteBox_left_con {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 99;

      .login_logo {
        margin-top: 172px;
      }

      .login_logo img {
        width: 220px;
        margin: 0 auto;
        display: block;
        color: #fff;
        filter: drop-shadow(#fff 800px 0);
        transform: translate(-800px, 0);
        // box-shadow:-1px -1px 4px rgba(115,115,115,0.6) inset,
        //       1px 1px 4px rgba(115,115,115,0.6) inset;
      }

      .zhxf_tit img {
        width: 288px;
        height: 60px;
        margin: 0 auto;
        margin-top: 50px;
        display: block;
      }

      .zhxf_js {
        font-size: 32px;
        color: #fff;
        margin-top: 26px;
        text-align: center;
        letter-spacing: 5px;
        text-shadow: 0 0 8px #000;
      }

      .copyRight {
        font-size: 10px;
        color: #fff;
        text-align: center;
        margin-top: 116px;
      }
    }
  }

  .siteBox_right {
    width: 564px;
    height: 806px;
    background: #fff;

    .login_input_box {
      width: 360px;
      margin: 0 auto;
      margin-top: 200px;

      .login_input_tit {
        font-size: 30px;
        color: #72777d;
        font-weight: bold;
        letter-spacing: 1px;
        margin-bottom: 60px;
        padding-left: 30px;
      }
    }

    .el-form-item__content {
      margin-bottom: 30px;
    }

    input.el-input__inner {
      border-radius: 20px;
      height: 45px !important;
      line-height: 45px !important;
      font-weight: bold;
      font-size: 18px;
      padding: 0 30px;
    }

    input.el-input__inner::placeholder {
      font-weight: bold;
      font-size: 18px;
    }

    input.el-input__inner:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
      // -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
      // background-color: transparent !important;//设置input框记住密码背景颜色
      // background-image: none;
      // transition: background-color 50000s ease-in-out 0s;
      // -webkit-text-fill-color: #fff !important;//设置浏览器默认密码字体颜色
      -webkit-text-font-size: 18px !important;
      -webkit-text-font-weight: bold !important;
    }

    .login-btn-submit {
      font-size: 20px;
      letter-spacing: 18px;
      font-weight: bold;
      border-radius: 20px;
      margin-top: -30px;
    }
  }
}

.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(38, 50, 56, .6);
  overflow: hidden;

  &:before {
    position: fixed;
    top: 0;
    left: 0;
    // z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(~@/assets/img/xf.jpg);
    background-size: cover;
  }

  .site-content__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
  }

  .site-content {
    min-height: 100%;
    padding: 30px 500px 30px 30px;
  }

  .brand-info {
    margin: 220px 100px 0 90px;
    color: #fff;
  }

  .brand-info__text {
    margin: 0 0 22px 0;
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
  }

  .brand-info__intro {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.58;
    opacity: .6;
  }

  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 150px 60px 180px;
    width: 470px;
    min-height: 100%;
    background-color: #fff;
  }

  .login-title {
    font-size: 16px;
    height: 60px;
    line-height: 60px;
  }

  .login-captcha {
    overflow: hidden;

    > img {
      width: 100%;
      cursor: pointer;
    }
  }

  .login-btn-submit {
    width: 100%;
    margin-top: 38px;
  }
}
</style>
